// TODO 将此处URL修改为查询评论列表的URL
$.ajax({
    url: '/comments',
    type: 'GET',
    success: function (res) {
        if (res.code === 0) {
            var comments = res.data;
            render(comments);

            $(".reply_comment").click(reply);
        } else {
            layer.msg("加载数据失败！");
        }
    }
});

var user = $.cookie('user');
if (user) {
    user = JSON.parse(user);
    $("input[name=nickname]").val(user.nickname);
    $("input[name=email]").val(user.email);
} else {
    user = {nickname: '', email: ''}
}

var tmpComment = {};

function commentChange(t) {
    var name = t.name;
    tmpComment[name] = t.value;
    console.log(tmpComment);
}

function reply(e) {
    var _this = $(e.target);
    var comment = _this.closest(".comments");
    var field = comment.data('field');
    var content = '> ' + comment.find('.content')[0].innerText;
    var dialog = $("#comment_dialog").html();
    dialog = dialog.format({content: content, nickname: user.nickname, email: user.email});
    var width = 580;
    var offsetLeft = document.body.clientWidth / 2 - width / 2 + 100;

    var parentId = field.parentid;
    if (!parentId) {
        var data = _this.closest(".parent").data('field');
        parentId = data.id;
    }

    tmpComment = {};

    layer.open({
        title: '回复：' + field.nickname,
        content: dialog,
        area: [width + 'px', '350px'],
        offset: ['240px', offsetLeft + 'px'],
        btn: ['提交'],
        yes: function (index, layero) {
            var content = tmpComment.content;
            var email = tmpComment.email || user.email;
            var nickname = tmpComment.nickname || user.nickname;

            submit(content, nickname, email, field.nickname, field.id, parentId);

            layer.close(index);
        }
    })
}

function comment() {
    var content = $("form textarea[name=content]").val();
    var nickname = $("form input[name=nickname]").val();
    var email = $("form input[name=email]").val();

    submit(content, nickname, email);
}

function submit(content, nickname, email, replyname, replyid, parentid) {
    var comment = {
        "content": content,
        "replyname": replyname,
        "replyid": replyid,
        "parentid": parentid,
        "user.nickname": nickname,
        "user.avatar": "https://gravatar.loli.net/avatar/fc49c3c6b84408c7c44fc2c79f6c041f",
        "user.email": email
    };

    var user = {nickname: nickname, email: email};
    $.cookie('user', JSON.stringify(user));

    // TODO 将此处 URL 修改为你提交评论的 URL
    $.post('/comments', comment, function (res) {
        if (res.code === 0) {
            location.reload();
        }
        layer.msg(res.msg);
    });
}

function render(comments) {
    for (var i = 0; i < comments.length; i++) {
        var comment = comments[i];
        var view = $(template.format(comment));
        if (comment.num > 0 && comment.reply) {
            var reply = $(replyTemp.format({num: comment.num}));
            var replyItems = "";
            for (var k = 0; k < comment.reply.length; k++) {
                var replyItem = comment.reply[k];
                var tmpReplyTitleTemp = otherReplyTitleTemp;
                if (k === 0) {
                    tmpReplyTitleTemp = firstReplyTitleTemp;
                }
                var tmpReplyItemTemp = replyItemTemp.format({'replytitle': tmpReplyTitleTemp});
                replyItems += tmpReplyItemTemp.format(replyItem);
            }
            reply.find(".items").append(replyItems);
            view.find('.msg').append(reply);
        }
        $("#comments_list").append(view);
    }
}

var template = "<div data-v-4f8e9454=\"\" id=\"comments_{{id}}\" data-field='{\"id\":{{id}}, \"nickname\": \"{{user.nickname}}\"}'\n" +
    "                             class=\"l_post clearfix comments parent\">\n" +
    "                            <div data-v-4f8e9454=\"\" class=\"avatar\">\n" +
    "                                <img data-v-4f8e9454=\"\"\n" +
    "                                     src=\"{{user.avatar}}\"\n" +
    "                                     title=\"hello world\" alt=\"avatar\">\n" +
    "                            </div>\n" +
    "                            <div data-v-4f8e9454=\"\" class=\"msg\">\n" +
    "                                <div data-v-4f8e9454=\"\">\n" +
    "                                    <span data-v-4f8e9454=\"\" class=\"nickname\">{{user.nickname}}</span>\n" +
    "                                    <span data-v-4f8e9454=\"\" class=\"createtime\">{{createtime}}</span> :\n" +
    "                                </div>\n" +
    "                                <div data-v-4f8e9454=\"\" class=\"con content\">{{content}}</div>\n" +
    "                                <p data-v-4f8e9454=\"\" class=\"time\"><a class='reply_comment' href=\"javascript:;\">回复({{num}})</a></p>\n" +
    "                            </div>\n" +
    "                        </div>";
var replyTemp = "<div data-v-4f8e9454=\"\" class=\"reply\">\n" +
    "                                    <div class='items'>" +
    "                                    </div>" +
    "                                    <p data-v-4f8e9454=\"\" class=\"time\">\n" +
    "                                        <a class='reply_comment' href=\"javascript:;\">回复层主</a>" +
    "                                    </p>" +
    "                                </div>";

var replyItemTemp = "<div data-v-4f8e9454=\"\" id=\"comments_{{id}}\" data-field='{\"id\":{{id}}, \"nickname\": \"{{user.nickname}}\"}' class=\"l_post clearfix comments\">\n" +
    "                                        <div data-v-4f8e9454=\"\" class=\"msg\">\n" +
    "                                            <div data-v-4f8e9454=\"\" class=\"con\">\n" +
    "                                                <p data-v-4f8e9454=\"\">\n" +
    "                                                    <img data-v-4f8e9454=\"\"\n" +
    "                                                         src=\"{{user.avatar}}\"\n" +
    "                                                         class=\"avatarimg\">\n{{replytitle}}" +
    "                                                </p>\n" +
    "                                                <div data-v-4f8e9454=\"\" class=\"reply_con content\">{{content}}</div>\n" +
    "                                            </div>\n" +
    "                                            <p data-v-4f8e9454=\"\" class=\"time\">\n" +
    "                                                <a class='reply_comment' href=\"javascript:;\">回复</a>\n" +
    "                                            </p>\n" +
    "                                        </div>\n" +
    "                                    </div>";

var firstReplyTitleTemp = "<span data-v-4f8e9454=\"\" class='nickname'>{{user.nickname}}</span>";

var otherReplyTitleTemp =
    "<span data-v-4f8e9454=\"\" class='nickname'>{{user.nickname}}</span> 回复 \n" +
    "<span data-v-4f8e9454=\"\" class='nickname'>{{replyname}}</span><span data-v-4f8e9454=\"\" class=\"createtime\">{{createtime}}</span> :";